<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view>
      <text class="title">{{ title }}</text>
      {{ this.$PROJECT_NAME }}
    </view>
    <div>
      <button @click="commitClick">调用根级别commit</button>
      <button @click="dispatchClick">调用根级别dispatch</button>
      根级别getters的使用{{ getCount }}
    </div>
    <br />
    <br />
    <br />
    <br />
    <div>
      <button @click="commitHomeClick">调用home模块的commit</button>
      <button @click="dispatchHomeClick">调用home模块的dispatch</button>
      调用home模块的getters的使用{{ getterMyCount }}
    </div>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
// import { openInWebview } from "@/utils/utils.js";
import { getModuleByPage, findProductDictList } from "@/services/index.js";
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {
    // console.log(openInWebview());
    getModuleByPage({
      channelCode: "district",
      pageType: "h5Home",
      areaType: 10010018,
    }).then((res) => {
      console.log(res);
    });
	findProductDictList().then((res)=>{
		console.log(res);
	})
  },
  methods: {
    commitClick() {
      this.$store.commit("increment", 12);
      console.log(this.$store.state.count);
    },
    dispatchClick() {
      this.$store.dispatch("incrementAct", 12);
      console.log(this.$store.state.count);
    },
    // 下面两个是调用home模块下的mutations以及actions的方式
    commitHomeClick() {
      this.$store.commit("home/changeMyCount", 10);
      console.log(this.$store.state.home.mycount);
    },
    dispatchHomeClick() {
      this.$store.dispatch("home/changeMyCountAct", 10);
      console.log(this.$store.state.home.mycount);
    },
  },
  computed: {
    // 使用根级别下的getters
    ...mapGetters(["getCount"]),
    // 使用home模块下的的getters
    ...mapGetters("home", ["getterMyCount"]),
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
<style lang="scss" scoped>
.content {
  font-size: 39rpx;
  font-weight: 700;
}
</style>
